<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="显示图片  缩放   裁剪   编辑图片  文件上传  upload 头像  照片  开源邦"/>
    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="GwtCropImg.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>图片缩放和裁剪示例-openbang.net</title>
    
    <script type="text/javascript" language="javascript">
       function unfinish(){
           //需要提交给后台的,请自行实现（增加Form,增加 input type=file等）
    	 var imgOrgiSize = document.getElementById("openbangimgSizeTxt").value;//图片原始宽高像素           
    	 var imgNowSize = document.getElementById("openbangimgNowSizeTxt").value;//缩放后的宽高像素
    	 var cropXY = document.getElementById("openbangcropXYTxt").value;//透明裁剪框左上角相对于图片左上角(0,0)的位置
    	 var cropSize = document.getElementById("openbangcropSizeTxt").value;//透明裁剪框的宽高像素
         alert("图片原始宽高:"+imgOrgiSize+",缩放后的宽高:"+imgNowSize+",裁剪位置:"+cropXY+",裁剪宽高:"+cropSize+",请根据这些参数提交给后台自行实现图片真正的缩放和裁剪");
       }

       //为了兼容FireFox，能够预览本地图片，当《浏览》本地文件时,往 openbangimgUrl 文本框放入一个特殊值
       function updateImageUrlName(fileObj){
    	   //alert(navigator.userAgent.toLowerCase().indexOf("gecko"));
    	   if(navigator.userAgent.toLowerCase().indexOf("gecko")>=0){
        	   document.getElementById("openbangimgUrl").value = "gecko[don't delete]";//fileObj.files[0].getAsDataURL();
    	   }
    	   else{
    		   document.getElementById("openbangimgUrl").value = fileObj.value;
    	   }
       }       
                               
       // 该方法由 GWT 自行判断，当浏览器为 FireFox 调用该方法
       function openbangGetImgFileUrl(){
           //容错判断 
           //alert(document.getElementById("openbangimgUrl").value.indexOf("gecko[don"));
           if(document.getElementById("openbangimgUrl").value.indexOf("gecko")==0 && document.getElementById("fileUrl")!=null){
               //FireFox能预览图片,返回 base64数据
               return document.getElementById("fileUrl").files[0].getAsDataURL();
           }
           else{
               return document.getElementById("openbangimgUrl").value;
           }
       } 
    </script>    
  </head>

  <body>

    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.http://www.openbang.net/images/logo.jpg
      </div>
    </noscript>

    <P align="center" class="titleTxt">裁剪图片示例--开源邦</P>

    <table align="center" border="1">
      <tr>
        <td valign="top">
		   <Table border="0" class="contentTxt">
		    <TR><TH colspan="2">图片原有属性:</TH></TR>
		    <TR><TD>图片路径:</TD><TD><input type="text" value="./audi_q7.jpg" id="openbangimgUrl" name="openbangimgUrl" size="20" /></TD></TR>
		    <TR><TD>本地图片:</TD><TD><input type="file" id="fileUrl" onchange='updateImageUrlName(this)' size="20" /></TD></TR>
		    <TR><TD>原始图宽高:</TD><TD><input type="text" value="" id="openbangimgSizeTxt" name="openbangimgSizeTxt" size="10" readonly="readonly"/>像素</TD></TR>
		    <TR><TD>操作区宽高:</TD><TD><input type="text" value="500*500" id="openbangactionSizeTxt" name="openbangactionSizeTxt" size="10"/>像素</TD></TR>
		    <TR><TD>裁剪框宽高:</TD><TD><input type="text" value="200*200" id="openbangcropSizeTxt" name="openbangcropSizeTxt" size="10"/>像素</TD></TR>
		    <TR><TD>缩放比例尺:</TD><TD><input type="text" value="5" id="openbangresizeRateTxt" name="openbangresizeRateTxt" size="10"/>%(整数,百分比)</TD></TR>
		    <TR><TD colspan="2" align="center"><button id="openbangrefreshParam" name="openbangrefreshParam">刷新属性</button>(修改以上属性请单击)</TD></TR>
		
		    <TR><TD colspan="2"><HR></TD></TR>
		    <TR><TH colspan="2">图片修改属性:</TH></TR>    
		    <TR><TD>图片缩放:</TD><TD><button id="openbangresize_small">缩小</button><button id="openbangresize_orgi">还原</button><button id="openbangresize_big">放大</button></TD></TR>
		    <TR><TD>缩放后的宽高:</TD><TD><input type="text" value="" id="openbangimgNowSizeTxt" name="openbangimgNowSizeTxt" size="10" readonly="readonly"/>像素</TD></TR>
		    <TR><TD>透明框左上角:</TD><TD><input type="text" value="" id="openbangcropXYTxt" name="openbangcropXYTxt" size="10" readonly="readonly"/>坐标</TD></TR>
		     <TR><TD colspan="2" align="center"><input type="button" name="view" value="查看效果" onclick="unfinish()"/></TD></TR>
		     <TR><TD colspan="2" align="left"><b>版本说明:</b><div id="openbangGwtVer"></div></TD></TR>
		     <TR><TD colspan="2" align="left"><b>特性说明:</b><br> 1.兼容FireFox、IE等主流浏览器<br>2.纯前台演示,下载后直接可以预览本地图片<br>3.后台没有实现,请自行考虑</TD></TR>
		     <TR><TD colspan="2" align="left"><b>操作说明:</b><br> 1.单击&lt;浏览&gt;,选择一个图片,单击&lt;刷新属性&gt;<br>2.鼠标移到图片区,按左右键可以拖动,按滚轮可以缩放</TD></TR>
		   </Table>
        </td>
        <td>
           <div id="openbangimg_action_div"><!-- 显示图片编辑的区域 -->
           </div> 
        </td>
      </tr>
    </table>
    <table align="center">
    <tr>
    <td>
<span>© 2010-2013 openbang.net. 开源邦版权所有 [<a href="http://www.miibeian.gov.cn">京ICP备10013529号 </a>]<script src="http://s57.cnzz.com/stat.php?id=1915272&web_id=1915272&show=pic" language="JavaScript"></script></span>    
    </td>
    </tr>
    </table>
  </body>
    <script type="text/javascript" language="javascript" src="gwtcropimg/gwtcropimg.nocache.js"></script>  
</html>
